<template>
  <div class="tmpl"> 
       <!-- 1.0 标题 -->
        <div class="title">
            <h4>{{photoInfo.title}}</h4>
            <p>{{photoInfo.add_time}}&nbsp;{{photoInfo.click}}次浏览</p>
        </div>


         <!-- 2.0 缩略图 -->
        <div class="mui-content">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li v-for="(item, index) in thumimageList" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <img class="preview-img" :src="item.src" height="100" @click="$preview.open(index, thumimageList)">
                </li>
            </ul>
        </div>


        <!-- 3.0 图片详情的内容 -->
        <div class="content" v-html="photoInfo.content"></div>



        <!-- 评论 -->
        <subcomment :commentId="this.$route.params.photoId"></subcomment>
  </div>
</template>

<style scoped> 
     .title{
        padding: 5px;
        border-bottom: 2px solid rgba(92,92,92,0.3);
        height: 100%;
    }

    .title h4{
        font-size: 16px;
        font-weight: bold;
        color:#0094ff;
    }

    .title p {
        font-size: 12px;
        color: #777777;
    }

    .content{
        padding: 5px;
        font-size: 14px;
        color: #777777;
    }
</style>

<script>
     
     import common from '../../tools/common.js';

     import sub from '../sub/sub.vue';

     
     export default {


        data(){
           return {

              photoInfo:{},

              thumimageList:[]
           };
        },
        created(){
            this.getcont();
            this.getThumimagesData();
        },
        methods:{

          getcont(){


              const url =common.apihost+'api/getimageInfo/'+this.$route.params.photoId;

              this.$http.get(url).then(res=>{
                  this.photoInfo=res.body.message[0]; 
              },err=>{
                  console.log(err);
              }) 

          },

          // 获取缩略图
          // getpic(){
          //   const url=common.apihost+'api/getthumimages/'+this.$route.params.photoId;


          //   this.$http.get(url).then(res=>{

          //        res.body.message.forEach(item=>{
          //           item.w=600;
          //           item.h=400;
          //        })

          //       this.thumimageList=res.body.message;
          //   },err=>{
          //       console.log(err);
          //   })
          // }  
           
           getThumimagesData(){
                //url
                const url = common.apihost + "api/getthumimages/"+this.$route.params.photoId;

                //send request
                this.$http.get(url).then(res=>{
                    //console.log(res.body.message);
                    res.body.message.forEach(item=>{
                        item.w = 600;
                        item.h = 400;
                    })
                    this.thumimageList = res.body.message;
                },err=>{
                    console.log(err);
                })
            }
        },
         components:{
            subcomment:sub
          }
     }

</script>